<template>
  <div class="editRole">
    <div class="top">
      <el-page-header :icon="ArrowLeft" :content="content" @back="go" />
    </div>
    <div class="bottom">
      <el-scrollbar height="calc(100% - 200px)" class="left-content" @scroll="onScroll">
        <div class="left">
          <div class="info-alert" id="basicInformation">
            <alert :content="'基本信息'"></alert>
          </div>
          <div class="info-form">
            <el-form
              ref="ruleFormRef"
              :model="basicForm"
              :rules="basicRules"
              label-width="120px"
              class="demo-ruleForm"
              status-icon
              label-position="top"
            >
              <el-form-item label="员工角色" prop="name">
                <el-input v-model.trim="basicForm.name" type="text" />
              </el-form-item>
              <el-form-item label="角色类型">
                <el-radio-group v-model.trim="basicForm.type" @change="roleTypeChange">
                  <div>
                    <el-radio :label="'admin'">
                      <span class="label">管理员</span>
                      <span
                        >可以选取使用管理工作台和客服工作台的所有功能，适用于客服主管、小组长、质检员等</span
                      ></el-radio
                    >
                  </div>
                  <!-- <div>
                    <el-radio :label="'userCall'"
                      ><span class="label">呼叫客服</span>
                      <span>可以选取呼叫中心相关客服工作台的所有功能，适用于一线电话客服人员</span>
                    </el-radio>
                  </div> -->
                  <div>
                    <el-radio :label="'custom'"
                      ><span class="label">自定义客服</span>
                      <span>可以选取客服工作台的所有功能，适用于需要处理业务的客服人员</span>
                    </el-radio>
                  </div>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="角色描述">
                <el-input v-model.trim="basicForm.description" type="textarea" />
              </el-form-item>
            </el-form>
          </div>
          <div class="info-alert" v-if="basicForm.type == 'admin'" id="console">
            <alert :content="'管理工作台'"></alert>
            <div class="role-item" v-for="(item, index) of roleSettingList.console" :key="index">
              <el-checkbox
                v-model="consoleCheckAll[item.id]"
                :indeterminate="isIndeterminate[item.id]"
                @change="(val) => handleCheckAllChange(val, item)"
                :id="item.id"
                >{{ item.name }}</el-checkbox
              >
              <div class="checkBox-line"></div>
              <el-checkbox-group
                v-model="checkedConsoleRole[item.id]"
                @change="(val) => checkedConsoleRoleChange(val, item)"
              >
                <el-checkbox
                  v-for="role in consoleRoleList[item.id]"
                  :key="role.id"
                  :label="role.id"
                  :class="role.scope ? 'role-checkbox' : ''"
                >
                  <p>{{ role.name }}</p>
                  <div v-if="role.scope">
                    <el-select v-model="checkedConsoleRoleScoped[role.id]" class="m-2" placeholder="请选择" size="mini">
                      <el-option
                        v-for="item in roleScopeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div class="info-alert" id="workbench">
            <alert :content="'客服工作台'"></alert>
            <div class="role-item" v-for="(item, index) of roleSettingList.workbench" :key="index">
              <el-checkbox
                v-model="worbenchCheckAll[item.id]"
                :indeterminate="isIndeterminate1[item.id]"
                @change="(val) => handleCheckWorkbenchAllChange(val, item)"
                :id="item.id"
                >{{ item.name }}</el-checkbox
              >
              <div class="checkBox-line"></div>
              <el-checkbox-group
                v-model="checkedWorbenchRole[item.id]"
                @change="(val) => checkedWorkbenchRoleChange(val, item)"
              >
                <el-checkbox
                  v-for="role in workbenchRoleList[item.id]"
                  :key="role.id"
                  :label="role.id"
                  :class="role.scope ? 'role-checkbox' : ''"
                >
                  <p>{{ role.name }}</p>
                  <div v-if="role.scope">
                    <el-select
                      v-model="checkedWorkbenchRoleScoped[role.id]"
                      class="m-2"
                      placeholder="请选择"
                      size="mini"
                      @change="(val) => scopeChange(val, item)"
                    >
                      <el-option
                        v-for="item in roleScopeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div class="right">
        <Nav :headers="rightNav" @onScrollNav="onScrollNav" :toId="toId"></Nav>
      </div>
    </div>
    <div class="footer">
      <div>
        <el-button type="default" @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive, onBeforeMount, getCurrentInstance } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import Nav from '@/common/components/right-nav/index.vue'
import alert from '@/common/components/alert/index.vue'
import { FormRules, ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { userModule } from '@/common/store/modules/user'
import { getRoleSystem, getRoleSettiingItem, addRole, updateRole, getAccountSku } from '@app/base/apis/role-config'

export default defineComponent({
  name: 'editRole',
  components: {
    Nav,
    alert
  },
  // ----------------生命周期-----------------------
  setup() {
    const USERMODULE = userModule()
    const instance: any = getCurrentInstance()
    interface State {
      content: string
      headers: Record<string, unknown>[]
      rightNav: Record<string, unknown>[]
      basicForm: Record<string, unknown>
      roleList?: any
      roleSettingList?: any
      consoleRoleList?: any
      workbenchRoleList?: any
      consoleCheckAll?: any
      worbenchCheckAll?: any
      checkedConsoleRole?: any
      checkedConsoleRoleScoped?: any
      checkedWorbenchRole?: any
      checkedWorkbenchRoleScoped?: any
      isIndeterminate: Record<string, unknown>
      isIndeterminate1: Record<string, unknown>
      consoleRoles?: any
      workbenchRoles?: any
      submitObj?: any
      roleScopeList: Record<string, unknown>[]
      tableData: Record<string, unknown>[]
      toId: string
    }

    const ROUTER = useRouter()
    const route: any = useRoute()

    const state: State = reactive({
      content: '编辑角色',
      headers: [
        {
          name: '基本设置',
          id: 'basicInformation'
        },
        {
          name: '管理工作台',
          id: 'console',
          children: []
        },
        {
          name: '客户端',
          id: 'workbench',
          children: []
        }
      ],
      rightNav: [],
      // 基本信息
      basicForm: {
        name: '',
        type: 'admin',
        description: ''
      },
      tableData: [],
      roleList: {},
      roleSettingList: {},
      consoleRoleList: {}, // 管理工作台角色list
      workbenchRoleList: {}, // 客服工作台角色list
      consoleCheckAll: {}, // 管理工作台全选
      worbenchCheckAll: {}, // 客服工作台全选
      checkedConsoleRole: {}, // 管理工作台单选
      checkedConsoleRoleScoped: {}, // 管理工作台数据权限
      checkedWorbenchRole: {}, // 客服工作台单选
      checkedWorkbenchRoleScoped: {}, // 客服工作台数据权限
      isIndeterminate: {}, // 管理工作台全选复选框
      isIndeterminate1: {}, // 客服工作台全选复选框
      consoleRoles: {}, // 管理工作台所有role
      workbenchRoles: {}, //客服工作台所有role
      submitObj: {
        _id: '',
        accountId: '',
        name: '',
        type: '',
        description: '',
        settings: {},
        limits: [],
        functions: [],
        dataScope: {}
      },
      roleScopeList: [
        {
          label: '个人数据',
          value: 1
        },
        {
          label: '服务组数据',
          value: 2
        },
        {
          label: '全部数据',
          value: 3
        }
      ],
      toId: 'basicInformation'
    })

    const basicRules = reactive<FormRules>({
      name: [{ required: true, message: '请选择', trigger: 'blur' }]
    })

    const list = {
      success: true,
      message: '200 ok!',
      code: '200',
      data: {
        unlimited: ['00_001', '00_002', '00_003', '00_004', '00_005', '00_006', '00_007', '00_008', '00_009', '00_010'],
        console: [
          {
            id: 'enterprise-mgmt',
            name: '企业管理',
            limits: ['00_011'],
            children: [
              {
                id: 'enterprise-info',
                name: '企业信息',
                limits: ['00_012'],
                children: null
              },
              {
                id: 'announcement-mgmt',
                name: '公告管理',
                limits: ['00_013', '00_014', '00_015', '00_016', '00_017', '00_018', '00_019'],
                children: null
              },
              {
                id: 'global-settings',
                name: '全局设置',
                limits: [
                  '00_020',
                  '00_021',
                  '00_022',
                  '00_023',
                  '00_024',
                  '00_025',
                  '00_026',
                  '00_027',
                  '00_028',
                  '00_029',
                  '00_030',
                  '00_031',
                  '00_032',
                  '00_033',
                  '00_034',
                  '00_035',
                  '00_036',
                  '00_037',
                  '00_038',
                  '00_039',
                  '00_040',
                  '00_041'
                ],
                children: null
              },
              {
                id: 'docking-mgmt',
                name: '扩展对接',
                limits: [
                  '00_042',
                  '00_043',
                  '00_044',
                  '00_045',
                  '00_046',
                  '00_047',
                  '00_048',
                  '00_049',
                  '00_050',
                  '00_051'
                ],
                children: null
              },
              {
                id: 'oplog',
                name: '操作日志',
                limits: ['00_052'],
                children: null
              }
            ]
          },
          {
            id: 'user-mgmt',
            name: '员工管理',
            limits: ['00_054'],
            children: [
              {
                id: 'user-import-export',
                name: '导入/导出',
                limits: ['00_055', '00_056', '00_057', '00_058'],
                children: null
              },
              {
                id: 'service-group-mgmt',
                name: '服务组管理',
                limits: ['00_055', '00_059', '00_060', '00_061', '00_062'],
                children: null
              },
              {
                id: 'users',
                name: '员工管理',
                limits: [
                  '00_055',
                  '00_063',
                  '00_064',
                  '00_065',
                  '00_066',
                  '00_067',
                  '00_068',
                  '00_069',
                  '00_070',
                  '00_071'
                ],
                children: null
              }
            ]
          },
          {
            id: 'customer-mgmt',
            name: '客户管理',
            limits: ['03_001'],
            children: [
              {
                id: 'customers',
                name: '客户池',
                limits: ['03_002', '03_003', '03_004', '03_005', '03_006'],
                children: null
              },
              {
                id: 'customer-settings',
                name: '客户设置',
                limits: ['03_007', '03_008', '03_009', '03_010'],
                children: null
              }
            ]
          },
          {
            id: 'call-center-admin',
            name: '呼叫中心',
            limits: ['01_001'],
            children: [
              {
                id: 'data-today',
                name: '今日数据',
                limits: [
                  '01_002',
                  '01_003',
                  '01_004',
                  '01_005',
                  '01_006',
                  '01_007',
                  '01_008',
                  '01_009',
                  '01_010',
                  '01_103'
                ],
                children: null
              },
              {
                id: 'data-history',
                name: '历史数据',
                limits: [
                  '01_011',
                  '01_012',
                  '01_013',
                  '01_014',
                  '01_015',
                  '01_016',
                  '01_017',
                  '01_018',
                  '01_019',
                  '01_020',
                  '01_021',
                  '01_022',
                  '01_023',
                  '01_024',
                  '01_025'
                ],
                children: null
              },
              {
                id: 'cdr',
                name: '通话记录',
                limits: ['01_026', '01_027', '01_028', '01_029', '01_030'],
                children: null
              },
              {
                id: 'call-missed',
                name: '呼损记录',
                limits: ['01_031', '01_032', '01_033', '01_034'],
                children: null
              },
              {
                id: 'call-task',
                name: '外呼任务',
                limits: ['01_035', '01_036', '01_037', '01_038', '01_039'],
                children: null
              },
              {
                id: 'visitor-settings',
                name: '访客端设置',
                limits: ['01_040', '01_041', '01_042'],
                children: null
              },
              {
                id: 'agent-settings',
                name: '客服端设置',
                limits: ['01_043', '01_044', '01_045'],
                children: null
              },
              {
                id: 'call-settings',
                name: '呼叫路由',
                limits: [
                  '01_046',
                  '01_047',
                  '01_048',
                  '01_049',
                  '01_050',
                  '01_051',
                  '01_052',
                  '01_053',
                  '01_054',
                  '01_055',
                  '01_056',
                  '01_057',
                  '01_058',
                  '01_059',
                  '01_060',
                  '01_061',
                  '01_062',
                  '01_063',
                  '01_064',
                  '01_064',
                  '01_065',
                  '01_066',
                  '01_067',
                  '01_068',
                  '01_069',
                  '01_070',
                  '01_071',
                  '01_072',
                  '01_073',
                  '01_074',
                  '01_075',
                  '01_076',
                  '01_077',
                  '01_078',
                  '01_079',
                  '01_080',
                  '01_081',
                  '01_082'
                ],
                children: null
              }
            ]
          },
          {
            id: 'other-settings-admin',
            name: '其他',
            limits: ['00_077'],
            children: [
              {
                id: 'customer-number-hidden',
                name: '客户号码隐藏',
                limits: ['00_078'],
                children: null
              }
            ]
          }
        ],
        workbench: [
          {
            id: 'call-center-module',
            name: '呼叫中心',
            limits: ['01_083'],
            children: [
              {
                id: 'call-center',
                name: '呼叫中心',
                limits: ['01_084', '01_085', '01_086', '01_102', '01_103', '01_104', '01_105'],
                children: null
              },
              {
                id: 'callsheet',
                name: '通话记录',
                limits: ['01_086', '01_087', '01_088', '01_089', '01_090'],
                scope: true,
                children: null
              },
              {
                id: 'outgoing-task',
                name: '外呼任务',
                limits: ['01_091', '01_092', '01_093', '01_094'],
                scope: true,
                children: null
              },
              {
                id: 'call-monitor',
                name: '通话监控',
                limits: ['01_095', '01_096', '01_097', '01_098', '01_99', '01_100', '01_101'],
                children: null
              }
            ]
          },
          {
            id: 'customer-module',
            name: '客户管理',
            limits: ['03_011'],
            children: [
              {
                id: 'customer-pool',
                name: '客户池',
                limits: ['03_012', '03_013', '03_014', '03_015', '03_016'],
                children: null
              },
              {
                id: 'customer-send-sms',
                name: '发送短信',
                limits: ['03_012', '03_017'],
                children: null
              }
            ]
          }
        ]
      }
    }

    // 权限数据
    const getRoleList = async () => {
      const res = await getRoleSystem()
      state.roleList = res.data || []
    }

    // 角色设置数据
    const getRoleSettingList = async () => {
      const res = await getRoleSettiingItem()
      if (res && res.data) {
        state.roleSettingList = list.data || []
        state.headers[1].children = res.data.console
        state.headers[2].children = res.data.workbench
        state.rightNav = state.headers
        getRoleData()
      }
    }

    // sku数据
    const getAccountData = async () => {
      const res = await getAccountSku()
      if (res && res.data) {
        console.log(res, 'sku数据')
      }
    }

    // 返回
    const go = () => {
      ROUTER.back()
    }

    // 管理工作台全选
    const handleCheckAllChange = (val: boolean, item: any) => {
      state.checkedConsoleRole[item.id] = val ? state.consoleRoles[item.id] : []
      state.isIndeterminate[item.id] = false
      const list: any = state.roleList.console || []
      if (val) {
        if (item.children && item.children.length) {
          item.children.forEach((val: any) => {
            if (state.consoleRoles[item.id].includes(val.id)) {
              if (list && list.length) {
                list.forEach((res: any) => {
                  res.limits.forEach((res1: any) => {
                    if (val.limits.includes(res1.id)) {
                      state.submitObj.limits.push(res1.id)
                      if (res1.functions && res1.functions.length) {
                        res1.functions.forEach((res2: any) => {
                          state.submitObj.functions.push(res2.id)
                        })
                      }
                    }
                  })
                })
              }
            }
          })
        }
      }
    }

    // 客服工作台全选
    const handleCheckWorkbenchAllChange = (val: boolean, item: any) => {
      state.checkedWorbenchRole[item.id] = val ? state.workbenchRoles[item.id] : []
      state.isIndeterminate1[item.id] = false
      const list: any = state.roleList.workbench || []
      if (val) {
        if (item.children && item.children.length) {
          item.children.forEach((val: any) => {
            if (state.workbenchRoles[item.id].includes(val.id)) {
              if (list && list.length) {
                list.forEach((res: any) => {
                  res.limits.forEach((res1: any) => {
                    if (val.limits.includes(res1.id)) {
                      state.submitObj.limits.push(res1.id)
                      if (res1.functions && res1.functions.length) {
                        res1.functions.forEach((res2: any) => {
                          state.submitObj.functions.push(res2.id)
                        })
                      }
                    }
                  })
                })
              }
            }
          })
        }
      }
    }

    // 管理工作台单选
    const checkedConsoleRoleChange = (val: string[], item: any) => {
      const checkedCount = val.length
      state.consoleCheckAll[item.id] = checkedCount === state.consoleRoles[item.id].length
      state.isIndeterminate[item.id] = checkedCount > 0 && checkedCount < state.consoleRoles[item.id].length
      if (val && val.length) {
        getData(state.roleList.console, val, item)
      }
    }

    // 客服工作台单选
    const checkedWorkbenchRoleChange = (val: string[], item: any) => {
      const checkedCount = val.length
      state.worbenchCheckAll[item.id] = checkedCount === state.workbenchRoles[item.id].length
      state.isIndeterminate1[item.id] = checkedCount > 0 && checkedCount < state.workbenchRoles[item.id].length
      if (val && val.length) {
        getData(state.roleList.workbench, val, item)
      }
    }

    // 取消
    const cancel = () => {
      ROUTER.back()
    }

    // 角色保存
    const save = () => {
      console.log(userModule, 'userModule')
      state.submitObj._id = state.basicForm._id
      state.submitObj.accountId = USERMODULE.accountId
      state.submitObj.name = state.basicForm.name
      state.submitObj.type = state.basicForm.type
      state.submitObj.description = state.basicForm.description
      state.submitObj.limits = [...new Set(state.submitObj.limits)] // 去重
      state.submitObj.functions = [...new Set(state.submitObj.functions)] // 去重
      const sendData = state.submitObj
      const obj: any = {}
      obj.console = {}
      obj.workbench = {}
      obj.console = state.checkedConsoleRole
      obj.workbench = state.checkedWorbenchRole
      obj.consoleDataScope = state.checkedConsoleRoleScoped
      obj.workbenchDataScope = state.checkedWorkbenchRoleScoped
      sendData.settings = obj
      instance?.refs.ruleFormRef.validate((valid: boolean) => {
        if (valid) {
          if (sendData._id) {
            updateRole(sendData).then((res) => {
              if (res && res.success) {
                ElMessage.success('编辑成功')
                ROUTER.push('/staff/role')
              }
            })
          } else {
            delete sendData._id
            delete sendData.accountId
            addRole(sendData).then((res) => {
              if (res && res.success) {
                ElMessage.success('添加成功')
                ROUTER.push('/staff/role')
              }
            })
          }
        }
      })
    }

    // 角色类型切换
    const roleTypeChange = (val: any) => {
      if (val === 'custom') {
        state.rightNav = [Object.assign(state.headers[0], state.headers[2])]
      } else {
        state.rightNav = state.headers
      }
    }

    // 单选取值
    function getData(list: any, arr: string[], item: any) {
      // 拿选中值去角色设置表和整个权限表中过滤对比找出菜单权限以及功能权限以及数据权限
      // item 角色设置项
      // list 大的权限数据
      if (item.children && item.children.length) {
        item.children.forEach((val: any) => {
          if (arr.includes(val.id)) {
            if (list && list.length) {
              list.forEach((res: any) => {
                res.limits.forEach((res1: any) => {
                  if (val.limits.includes(res1.id)) {
                    Object.keys(state.checkedWorkbenchRoleScoped).forEach((scope: any) => {
                      if (val.id === scope) {
                        state.submitObj.dataScope[res1.id] = state.checkedWorkbenchRoleScoped[scope] // 数据权限
                      }
                    })
                    state.submitObj.limits.push(res1.id) // 菜单权限
                    if (res1.functions && res1.functions.length) {
                      res1.functions.forEach((res2: any) => {
                        state.submitObj.functions.push(res2.id) // 功能权限
                      })
                    }
                  }
                })
              })
            }
          }
        })
      }
    }

    // 获取角色下的权限数据
    function getRoleData() {
      const consoleList = state.roleSettingList.console
      const workbenchList = state.roleSettingList.workbench
      // 管理工作台数据抽取
      if (consoleList && consoleList.length) {
        consoleList.forEach((item: any) => {
          // 拿到所有的复选框项做全选准备
          let consoleRoleList: any = []
          state.consoleRoles[item.id] = []
          state.consoleRoleList[item.id] = [] // 复选框组下的复选框渲染
          if (item.children && item.children.length) {
            consoleRoleList = item.children
            state.consoleRoleList[item.id] = consoleRoleList
            item.children.forEach((val: any) => {
              state.consoleRoles[item.id].push(val.id)
            })
          }
        })
      }
      // 客服工作台数据抽取
      if (workbenchList && workbenchList.length) {
        workbenchList.forEach((item: any) => {
          // 拿到所有的复选框项做全选准备
          let workbenchRoleList: any = []
          state.workbenchRoles[item.id] = []
          state.workbenchRoleList[item.id] = [] // 复选框组下的复选框渲染
          if (item.children && item.children.length) {
            workbenchRoleList = item.children
            state.workbenchRoleList[item.id] = workbenchRoleList
            item.children.forEach((val: any) => {
              state.workbenchRoles[item.id].push(val.id)
            })
          }
        })
      }
    }

    // 右侧跳转
    function onScrollNav(link: string) {
      if ((document as any).getElementById(link)) {
        ;(document as any).getElementById(link).scrollIntoView({ behavior: 'smooth' })
      }
    }

    // 滚动事件，对应右侧更改
    const onScroll = (obj: any) => {
      const arrayOfDocFonts = document.getElementsByClassName('info-alert')
      for (var i = 0; i < arrayOfDocFonts.length; i++) {
        if (arrayOfDocFonts[i].id != '') {
          const offsetHight = (document as any).getElementById(`${arrayOfDocFonts[i].id}`).offsetTop
          if (obj.scrollTop >= offsetHight) {
            state.toId = arrayOfDocFonts[i].id
          }
        }
      }
    }

    // 数据权限选择
    function scopeChange(val: any, item: any) {
      // 选择数据权限过滤权限表
      if (val) {
        // 管理工作台
        if (Object.keys(state.checkedConsoleRole).length) {
          Object.keys(state.checkedConsoleRole).forEach((res) => {
            let checkConsoleArr: any = []
            checkConsoleArr = state.checkedConsoleRole[res]
            // 大的管理工作台权限数据,选中的菜单数据,复选框组项
            getData(state.roleList.console, checkConsoleArr, item)
          })
        }
        // 客服工作台
        if (Object.keys(state.checkedWorbenchRole).length) {
          Object.keys(state.checkedWorbenchRole).forEach((res) => {
            let checkWorkbenchArr: any = []
            checkWorkbenchArr = state.checkedWorbenchRole[res]
            getData(state.roleList.workbench, checkWorkbenchArr, item)
          })
        }
      }
    }

    onBeforeMount(async () => {
      await getRoleList()
      await getRoleSettingList()
      await getAccountData()
      if (route.params && route.params.data) {
        // 编辑时
        const data = JSON.parse(route.params.data)
        if (data && Object.keys(data).length) {
          state.content = '编辑角色'
          Object.keys(state.basicForm).forEach((key) => {
            state.basicForm[key] = data[key] == undefined ? state.basicForm[key] : data[key]
          })
          state.basicForm._id = data._id
          state.submitObj.limits = data.limits
          state.submitObj.functions = data.functions
          state.submitObj.dataScope = data.dataScope
          // 回显数据,编辑过的数据已存一份setting数据用来回显
          if (data.settings && Object.keys(data.settings).length) {
            state.checkedConsoleRole = data.settings.console || {}
            state.checkedWorbenchRole = data.settings.workbench || {}
            state.checkedConsoleRoleScoped = data.settings.consoleDataScope || {}
            state.checkedWorkbenchRoleScoped = data.settings.workbenchDataScope || {}
          } else {
            // 如果没有setting数据去大的权限表里匹配回显
            // 管理工作台
            if (state.consoleRoleList && Object.keys(state.consoleRoleList).length) {
              Object.keys(state.consoleRoleList).forEach((item) => {
                state.checkedConsoleRole[item] = []
                if (data.limits) {
                  data.limits.forEach((val: any) => {
                    if (state.consoleRoleList[item][0].limits.includes(val)) {
                      state.consoleRoleList[item].forEach((val1: any) => {
                        state.checkedConsoleRole[item].push(val1.id) // 选中的复选框项
                        state.checkedConsoleRoleScoped[val1.id] = state.submitObj.dataScope[val] // 选中的数据权限项
                      })
                    }
                  })
                }
              })
            }
            // 客服工作台
            if (state.workbenchRoleList && Object.keys(state.workbenchRoleList).length) {
              Object.keys(state.workbenchRoleList).forEach((item) => {
                state.checkedWorbenchRole[item] = []
                if (data.limits) {
                  data.limits.forEach((val: any) => {
                    if (state.workbenchRoleList[item][0].limits.includes(val)) {
                      state.workbenchRoleList[item].forEach((val1: any) => {
                        state.checkedWorbenchRole[item].push(val1.id) // 选中的复选框项
                        state.checkedWorkbenchRoleScoped[val1.id] = state.submitObj.dataScope[val] // 选中的数据权限项
                      })
                    }
                  })
                }
              })
            }
          }
          // 管理工作台全选回显
          if (state.consoleRoles && Object.keys(state.consoleRoles).length) {
            Object.keys(state.consoleRoles).forEach((item) => {
              if (
                state.checkedConsoleRole[item] &&
                state.checkedConsoleRole[item].length == state.consoleRoles[item].length
              ) {
                state.consoleCheckAll[item] = true
              }
            })
          }
          // 客服工作台全选回显
          if (state.workbenchRoles && Object.keys(state.workbenchRoles).length) {
            Object.keys(state.workbenchRoles).forEach((item) => {
              if (
                state.checkedWorbenchRole[item] &&
                state.checkedWorbenchRole[item].length == state.workbenchRoles[item].length
              ) {
                state.worbenchCheckAll[item] = true
              }
            })
          }
        }
      } else {
        state.content = '新建角色'
      }
    })

    return {
      ...toRefs(state),
      basicRules,
      ArrowLeft,
      onScrollNav,
      onScroll,
      getRoleData,
      go,
      handleCheckAllChange,
      handleCheckWorkbenchAllChange,
      checkedConsoleRoleChange,
      checkedWorkbenchRoleChange,
      cancel,
      save,
      roleTypeChange,
      scopeChange
    }
  }
})
</script>

<style lang="stylus" scoped>
.editRole
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 12px 24px;
    gap: 16px;
    width: 100%;
    box-sizing border-box
    height: calc(100vh - 60px);
    background: #ffffff;
    flex: none;
    order: 0;
    flex-grow: 0;
    position relative
    transform: scale(1, 1)
    .top
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 8px;
        width: 100%;
        height: 36px;
        background: #fff;
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
        :deep(.el-page-header__content)
            font-weight: 500;
            font-size: 14px;
            flex: none;
            order: 0;
            flex-grow: 0;
    .bottom
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 0px;
        gap: 40px;
        width: 100%;
        height: 100vh;
        flex: none;
        order: 1;
        flex-grow: 0;
        .left-content
            width 100%
            padding-right 20px
        .left
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0px;
            gap: 16px;
            width: 100%;
            height: 100%;
            overflow-y auto
            flex: 1;
            order: 0;
            flex-grow: 1;
            .info-alert
                width 100%
                color: rgba(0, 0, 0, 0.88);
                font-weight: 500;
                font-size: 16px;
                .msg-warn
                    margin-bottom 0
            .info-form
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                padding: 0px;
                width: 100%;
                height: auto;
                flex: none;
                order: 0;
                align-self: stretch;
                flex-grow: 0;
                .el-form-item
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 8px;
                    width: 494px;
                    height: auto;
                    background: #FFFFFF;
                    flex: none;
                    order: 0;
                    flex-grow: 0;
                    margin 16px 0 0 0
                .el-form-item:nth-child(1)
                    margin-top 0
                :deep(.el-form-item__content),.el-select-v2,.el-input,.el-textarea
                    width 100% !important
                .el-radio-group
                    div
                        width 100%
                    .el-radio__label
                        .label
                            display inline-block
                            width 120px
                            font-size: 14px;
                            line-height: 20px;
                            letter-spacing: 0.001em;
                            color: rgba(0, 0, 0, 0.88);
                        span
                            font-size: 12px;
                            line-height: 18px;
                            letter-spacing: 0.001em;
                            color: rgba(0, 0, 0, 0.6);
            .role-item
                box-sizing: border-box;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                padding: 14px 16px;
                gap: 16px;
                width: 100%;
                height: auto;
                margin-top 16px
                background: #FFFFFF;
                border: 1px solid var(--mc-gray4-color);
                border-radius: 4px;
                flex: none;
                order: 2;
                align-self: stretch;
                flex-grow: 0;
                .checkBox-line
                  width: 100%;
                  height: 1px;
                  background: var(--mc-gray4-color);
                  flex: none;
                  order: 1;
                  align-self: stretch;
                  flex-grow: 0;
                  margin 16px 0
                .el-checkbox-group
                  display: flex;
                  flex-flow: wrap;
                  gap: 16px;
                  .el-checkbox
                    padding: 6px 16px;
                    gap: 8px;
                    width: 232px;
                    height 100%
                    background: var(--mc-gray2-color);
                    border-radius: 4px;
                    flex: none;
                    order: 0;
                    flex-grow: 0;
                .role-checkbox
                  padding: 6px 16px 16px !important;
                  :deep(.el-checkbox__input)
                    position relative
                    top -15px
        .right
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0px;
            width: 160px;
            flex: none;
            order: 1;
            flex-grow: 0;
            position relative
    .footer
        position: fixed
        bottom: 0
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        padding: 14px 24px;
        gap: 24px;
        width: 100%;
        height: 64px;
        background: #FFFFFF;
        box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.05);
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
        box-sizing border-box
</style>
